<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>vue.set()的使用</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称:{{ name }}</h2>
			<h2>学校地址:{{ address }}</h2>
			<hr />
			<h1>学生信息</h1>
			<button @click.once="addSex">添加一个性别属性,默认值是男</button>
			<h2>学生姓名:{{ stu.name }}</h2>
			<h2>学生真实年龄:{{ stu.age.rage }}</h2>
			<h2>学生对外年龄:{{ stu.age.sage}}</h2>
			<h2 v-if="stu.sex">学生性别: {{ stu.sex }}</h2>
			<h2>朋友们</h2>
			<ul v-for="(f, index) in stu.friends" :key="index">
				<li>{{ f.name }} -- {{ f.age }}</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					name: '武汉科技大学',
					address: '武汉',
					stu: {
						name: 'tom',
						age: {
							rage: 12,
							sage: 29
						},
						friends: [{
								name: 'Jerry',
								age: 23
							},
							{
								name: 'Jane',
								age: 18
							}
						]
					}
				},
				methods: {
					addSex() {
						//这里this === vm
						//利用Vue.set(或者vm.$set())api能够添加的属性变为响应式属性
						//注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
						Vue.set(this.stu, 'sex', '男')
						// this.$set(this.stu, 'sex', '男');
					}
				}
			})
		</script>
	</body>
</html>
